<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
	<title>VForm 3 Designer Demo</title>
	<link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.min.css" />
	<link rel="stylesheet" href="../dists/designer.style.css?t=20220204"> <!-- 根据Web服务器或CDN路径修改 -->
  <style type="text/css">
	  body {
	    margin: 0;  /* 消除垂直滚动条 */
	  }
	</style>
</head>
<body>
  <div id="app">
	  <v-form-designer  :model-id="modelId" ref="VFormDesigner" :field-list-api="fieldListApi" :form-json="formJson" :global-dsv="globalDsv"
	 :designer-config="designerConfig" :option-data="optionData">
	  <template #customToolButtons>
        <el-button type="default" @click="submitForm"><i class="el-icon-finished"></i>保存1</el-button>
      </template>
	  </v-form-designer>
  </div>
  
	 <script crossorigin="anonymous" integrity="sha512-9l+B+sZNtrdrhFWM0UGiKsRwZctEAfW7h8Z4Ycd3tQyvis8tZCpNkxTxJ3XcCRP54VD9YQs+4PeMVi5ctdlbcw==" src="https://lib.baomitu.com/vue/3.2.30/vue.global.min.js"></script>
	<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js"></script>
	<script src="../dists/designer.umd.js?t=20220204"></script> <!-- 根据Web服务器或CDN路径修改 -->
	<script src="./en.js?v=2"></script>
<script setup>
const m_id=2;
const { ref, reactive, onMounted, nextTick } = Vue;
//import { ref, reactive } from 'Vue'
const { ElMessage } = ElementPlus;
//const { axios } = axios;

		
const { createApp } = Vue;
const app= createApp({
	  data() {
		return {
		  modelId : m_id,
		  formJson: {},
		  formData: {},
		  optionData: {},
		  fieldListApi : {
			URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
			labelKey: 'fieldLabel',
			nameKey: 'fieldName'
		  },
		  designerConfig: {
			logoHeader: false,
			// generateSFCButton: false,
			toolbarMaxWidth: 480,
			//externalLink: false,
			//formTemplates: false,
			//eventCollapse: false,
			//clearDesignerButton: false,
			//previewFormButton: false,

			//presetCssCode: '.abc { font-size: 16px; }',
		  },

		  //全局数据源变量
		  globalDsv1: {
			testApiHost: 'http://www.test1.com/api'
		  },
		}
	  },
		mounted() {
			//this.$refs.VFormDesigner.setFormJson(formJson_c)
			<!-- axios.get('./data1.json').then(res=>{ -->
			    <!-- //console.log(res.data); -->
				<!-- let formJson = res.data; -->
				<!-- formJson = decrypt(formJson) -->
				<!-- //console.log(formJson); -->
				<!-- formJson = JSON.parse(formJson) -->
				<!-- //console.log(formJson); -->
				<!-- this.$refs.VFormDesigner.setFormJson(formJson); -->
			<!-- }).catch( function(error) { -->
				<!-- alert(error) -->
			<!-- }) -->
		  },	  
	  methods: {
        submitForm() {
			//console.log( this.$refs);
			//this.$refs.VFormDesigner.setFormJson(formJson_c)
			let formJson = this.$refs.VFormDesigner.getFormJson();
			
			if (formJson==''){
				ElMessage.error('error1');
			}
			
			formJson_encry=encrypt(JSON.stringify(formJson));
			//console.log(formJson_encry);
			//formJson_decry = decrypt(formJson_encry);
			//console.log(formJson_decry);
			
			let data={type:'editModel',modelId:this.modelId,formJson:formJson_encry};
			//console.log(formJson);
			  //this.$refs.VFormDesigner.getFormJson().then( (formJson) => {
				axios.post('./get_ajax.php',data).then(res=>{
					console.log(res);
					ElMessage.success('成功');
				}).catch(err => {
				ElMessage.error('error1');
			  })
            // Form Validation OK
           // alert( JSON.stringify(formJson) )
          //}).catch( function(error) {
            // Form Validation Failed
          //  alert(error)
         // })
        },
		
      },}).use(ElementPlus).use(VFormDesigner).mount("#app");
	
</script>

<style lang="scss">
  #app {
    height: 100%;
  }
</style>
</body>
</html>